<template>
  <div class="app-container" v-loading="pageLoading">

    <researchs :pressButtonControl="pressButtonControl" @createItem="createItem" v-if="basicInfoShow "
      @research="research">
      <template v-slot:firstLine>
        <el-cascader v-model="query.type_id" filterable style="width: 260px;" placeholder="设备类型" clearable
          class="filter-item" @keyup.enter.native="research" @clear="research" :props="MachineTypeProps"
          :options="MachineType">
        </el-cascader>
        <el-input style="width: 260px;" placeholder="售后公司" clearable class="filter-item" @keyup.enter.native="research"
          @clear="research" v-model="query.company">
        </el-input>
        <el-input style="width: 260px;" placeholder="输入设备/编码" clearable class="filter-item"
          @keyup.enter.native="research" @clear="research" v-model="query.machine_code">
        </el-input>
      </template>
    </researchs>

    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:operation="v">
        <!-- <a href="javascript:;" class="text-blue" @click.stop="goDetail(v.row)">售后履历</a> -->
        <a href="javascript:;" class="text-blue" @click.stop="editItem(v.row)">编辑</a>
        <a href="javascript:;" class="text-red" @click.stop="deleteItem(v.row)">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <!-- <serviceList :serviceShow="serviceShow" /> -->
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import serviceList from '@/views/tpm/components/serviceList'
import researchs from '@/views/tpm/components/research.vue'
import { deleteChildren } from '@/utils/index.js'
export default {
  name: 'serviceInfo',
  mixins: [commonMixin],
  components: { serviceList, researchs },
  props: {
    basicInfoShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      query: {
        machine_code: '',
        page: 1,
        size: 10,
      },
      pressButtonControl: {
        researchs: true, //查询
        exportData: true, // 导出
        more: false, // 更多
        Reset: false, // 重置
        createItems: true, // 创建
      },
      name: '售后信息',
      api: this.$api.TpmAfterSales,
      baseUrl: this.$api.baseUrl,
      postForList: true,
      MachineType: [],
      MachineTypeProps: {
        label: 'machine_type_name',
        value: 'id',
        children: 'child',
        emitPath: false,
      },
      tableProps: {
        border: true,
        opsColWith: 100,
        fixed: false,
        hideOperations: false,
      },
      columns: [
        { title: '设备类型', key: 'machine_type_name', width: 100 },
        { title: '设备编号', key: 'machine_code', width: 100 },
        { title: '售后公司名称', key: 'after_sales_company' },
        { title: '售后公司地址', key: 'company_address' },
        { title: '联系人', key: 'contacts', width: 80 },
        { title: '联系人职务', key: 'position', width: 100 },
        { title: '手机号码', key: 'tel1', width: 120 },
        { title: '座机号码', key: 'tel2', width: 120 },
        { title: '邮箱地址', key: 'email', width: 160 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 100 },
        // { title: '售后履历', key: 'modify_time', width: 80, fixed: 'right' },
      ],

      fields: [
        {
          title: '设备类型',
          key: 'type_id',
          span: 12,
          name: 'cascader',
          required: true,
          props: {
            filterable: true,
            checkStrictly: true,
            props: {
              children: 'child',
              value: 'id',
              label: 'machine_type_name',
              emitPath: false,
            },
          },
          events: {
            change: this.typeChange,
          },

          options: [],
        },

        {
          title: '设备',
          key: 'machine_id',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true },
        },
        {
          title: '售后公司名称',
          key: 'after_sales_company',
          span: 12,
        },
        { title: '售后公司地址', key: 'company_address', span: 12 },
        { title: '联系人', key: 'contacts', span: 12 },
        { title: '联系人职务', key: 'position', span: 12 },
        { title: '手机号码', key: 'tel1', span: 12 },
        { title: '座机号码', key: 'tel2', span: 12 },
        { title: '邮箱地址', key: 'email', span: 12 },
      ],
      // 售后履历
      serviceShow: false,
      serviceTableProps: {
        border: true,
        fixed: false,
        highlightCurrentRow: true,
        hideOperations: true,
      },
    }
  },
  computed: {},
  watch: {
    basicInfoShow: {
      immediate: true,
      handler(val, old) {
        if (!val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            highlightCurrentRow: true,
            hideOperations: true,
          }
        }
      },
    },
  },
  created() {
    this.research()
    // 获取设备类型
    this.getMachineType()
    this.typeChange()
  },
  mounted() {},
  methods: {
    getMachineType() {
      this.$request(this.baseUrl + 'Tpm/MachineType/GetTreeList').then((r) => {
        let tmp = deleteChildren(r, 'child')
        this.MachineType = tmp
        let tmpMa = this.fields.find((i) => i.key == 'type_id')
        tmpMa.options = tmp
      })
    },
    typeChange() {
      let data = {
        machine_type_id: this.data.type_id,
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'Tpm/Machine/GetList', data, 'post').then((r) => {
        const { list } = r
        let tmp = list.map((i) => ({
          label: i.machine_name,
          value: i.id,
        }))
        this.getFieldConfig('machine_id').options = tmp
      })
    },
    submit() {
      this.submitLoading = true
      this.$request(this.api + 'add', this.data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    // 获取备件状态,可以直接写在table里
    getStatus(val) {
      return '正常'
    },

    // 售后履历
    goDetail(v) {
      this.serviceShow = true
    },
  },
}
</script>

<style lang="scss" scoped>
.icon-class {
  font-size: 18px;
  cursor: pointer;
}
</style>